<template>
  <div id="chargesDetails_box">
    <div class="top_bar">
      <top-bar :title="title">
        <md-icon slot="left" class="back_btn"></md-icon>
      </top-bar>
    </div>
    <div class="charges_hd">
      <p>{{cityName}}</p>
    </div>
    <p class="chargesDetails_p">{{payStatus}}</p>
    <div class="charges_box">
      <div class="refund_box" v-if="payStatus=='已退款'">
        <p class="charges_list_one">
          退款金额
          <span>{{refoundMoney}}元</span>
        </p>
        <p class="charges_list_one">
          退款时间
          <span>{{refoundDate}}</span>
        </p>
        <p class="charges_list_one">
          退款至
          <span>{{refoundWay}}</span>
        </p>
      </div>
      <div v-if="payStatus=='已退款'">
        <p class="payment_hd">支付明细</p>
        <p class="incityType_hd">{{carType}}</p>
      </div>
      <div class="charges_list">
        <div v-for="(item,index) in data" :key="index">
          <p class="charges_list_one" :class="{coumonative:item.type=='2'}">
            {{item.name}}
            <span v-if="item.type=='2'">-{{item.money}}元</span>
            <span v-else>{{item.money}}元</span>
          </p>
          <p class="charges_list_two">{{item.desc}}</p>
        </div>
        <p class="charges_list_one">
          &nbsp;
          <span style="color:#333">应支付金额:{{lastOrderAmt}}元</span>
        </p>
        <p class="charges_list_one" v-if="payType">
          支付方式
          <span>{{payType}}</span>
        </p>
      </div>
    </div>
    <p class="seeValuationRules" @click="valuationRulesBtn">查看计价规则</p>
  </div>
</template>
<script>
import { Tabs, Icon, Field, InputItem, Toast, Dialog } from 'mand-mobile';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import TopBar from '@/components/TopBar';
import http from '@/common/http';
import Pop from '@/views/incity/popup';
var CryptoJS = require('crypto-js');
var moment = require('moment');
moment.locale('zh-cn');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [TopBar.name]: TopBar,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '费用明细',
      data: [],
      lastOrderAmt: '0.00',
      payType: '',
      payStatus: '',
      orderAmt: '0.00',
      refoundMoney: '0.00',
      refoundDate: '',
      refoundWay: '',
      carType: '',
      cityName: ''
    };
  },
  mounted() {
    if (this.$route.query.orderno) {
      let params = null;
      if (this.$route.query.user_coupon_id) {
        var couponid = '';
        if (this.$route.query.user_coupon_id === 'null' || this.$route.query.user_coupon_id === '') {
          couponid = '';
        } else {
          couponid = this.$route.query.user_coupon_id;
        }
        params = {
          orderNo: this.$route.query.orderno,
          couponId: couponid
        };
      } else {
        params = {
          orderNo: this.$route.query.orderno
        };
      }
      Loading.show();
      http.post('/pakj/city/getPriceDetail', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          console.log(res.data);
          this.data = [];
          for (var i in res.data.data.costDetail) {
            if (res.data.data.costDetail[i].money !== '0' && res.data.data.costDetail[i].money !== '0.00') {
              res.data.data.costDetail[i].money = this.orderAmtFormat(decryptByDESModeEBC(res.data.data.costDetail[i].money));
              this.data.push(res.data.data.costDetail[i]);
            }
          }
          if (res.data.data.orderAmt) {
            this.orderAmt = this.orderAmtFormat(decryptByDESModeEBC(res.data.data.orderAmt));
          }
          if (res.data.data.lastOrderAmt) {
            this.lastOrderAmt = this.orderAmtFormat(decryptByDESModeEBC(res.data.data.lastOrderAmt));
          }
          if (res.data.data.refoundMoney) {
            this.refoundMoney = this.orderAmtFormat(decryptByDESModeEBC(res.data.data.refoundMoney));
          }
          this.refoundDate = moment(res.data.data.refoundDate, 'x').format('YYYY-MM-DD HH:mm:ss');
          this.carType = res.data.data.carType;
          this.refoundWay = res.data.data.refoundWay;
          this.payStatus = res.data.data.payStatus;
          this.payType = res.data.data.payType;
          this.cityName = res.data.data.cityName;
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单号',
        confirmText: '确定'
      });
    }
  },
  methods: {
    // 处理金额
    orderAmtFormat(number) {
      if (number.indexOf('.') === -1) {
        return number + '.00';
      } else {
        return number;
      }
    },
    // 计价规则
    valuationRulesBtn() {
      if (Utils.isApp()) {
        this.$router.push({
          name: 'IncityValuationRules',
          query: {
            orderno: this.$route.query.orderno
          }
        });
      } else {
        Pop.createIncityChangeValuationRulesSelector().then(data => {});
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#chargesDetails_box {
  height: 100vh;
  background-color: #fff;
}

.top_bar {
  position: absolute;
  top: 0px;
  z-index: 1000;
  width: 100%;
}

.back_btn {
  width: 22px;
  height: 38px;
}

.charges_hd {
  background-color: #fff;
  padding-top: 20px;
}

.charges_hd p {
  padding-top: 70px;
  text-align: center;
  font-size: 40px;
  color: #333;
}

.chargesDetails_p {
  font-size: 18px;
  color: #555;
  text-align: center;
  padding-top: 10px;
}

.charges_box {
  background-color: #fff;
  padding: 0px 82px 40px 82px;
}

.charges_list {
  padding-top: 24px;
}

.charges_list_one {
  font-size: 28px;
  color: #666;
  margin-top: 20px;
}

.charges_list_one.coumonative {
  color: #ff6917;
}

.charges_list_one span {
  float: right;
}

.charges_list_two {
  font-size: 22px;
  color: #999;
  margin-top: 10px;
}

.chargesAmt {
  padding-top: 40px;
  font-size: 28px;
  color: #333;
  text-align: right;
}

.charges_coupon {
  font-size: 28px;
  padding-top: 40px;
  color: #FF6917;
}

.charges_coupon span {
  float: right;
}

.estimateAmt {
  font-size: 28px;
  padding-top: 80px;
  color: #666;
  text-align: right;
}

.estimateAmt span {
  font-size: 40px;
}

.faremin {
  font-size: 22px;
  padding-top: 4px;
  color: #999;
  margin-top: 10px;
}

.refund_box {
  margin-top: 20px;
}

.payment_hd {
  text-align: center;
  margin-top: 80px;
  font-size: 28px;
  color: #333;
}

.incityType_hd {
  text-align: center;
  margin-top: 10px;
  font-size: 28px;
  color: #666;
}

.seeValuationRules {
  width: 260px;
  height: 88px;
  border-radius: 6px;
  border: 1px solid #E0E0E0;
  line-height: 88px;
  text-align: center;
  font-size: 30px;
  color: #666;
  position: absolute;
  bottom: 60px;
  left: 50%;
  margin-left: -130px;
}
</style>
